import { 
  Paper,
  Button,
  TextField,
  Table,
  Dialog,
  Box,
  styled
} from '@mui/material';
import { alpha } from '@mui/material/styles';

// Color constants
const baseColor = '#00fff2';
const accentColor = '#00fff2';

// Shared style constants
const lightBgStyles = {
  background: 'rgba(0, 0, 0, 0)',
  backgroundColor: 'rgba(0, 0, 0, 0) !important',
};

const darkBgStyles = {
  background: 'rgba(0, 0, 0, 0)',
  backgroundColor: 'rgba(0, 0, 0, 0) !important',
};

// Shadow constants
const lightShadow = 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 4px 8px rgba(0, 0, 0, 0.05)';
const lightHoverShadow = 'inset 3px 3px 7px rgba(223, 227, 238, 0.9), inset -3px -3px 7px rgba(255, 255, 255, 1), 0 6px 12px rgba(0, 0, 0, 0.08)';
const darkShadow = 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 4px 10px rgba(0, 0, 0, 0.3)';
const darkHoverShadow = 'inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.08), 0 8px 15px rgba(0, 255, 242, 0.15)';

// Text color constants
const lightTextColor = 'rgba(0, 2, 3, 0.9)';
const darkTextColor = 'rgba(255, 255, 255, 0.9)';

// Border constants
const darkBorder = '1px solid rgba(0, 255, 242, 0.25)';

// Common component styles
const getCommonStyles = (darkMode) => ({
  // Light Mode
  ...(!darkMode && {
    ...lightBgStyles,
    boxShadow: lightShadow,
    color: lightTextColor,
    '& .MuiTypography-root': {
      color: lightTextColor,
      letterSpacing: '0.5px',
    },
    '&:hover': {
      ...lightBgStyles,
      boxShadow: lightHoverShadow,
    }
  }),
  
  // Dark Mode
  ...(darkMode && {
    ...darkBgStyles,
    boxShadow: darkShadow,
    border: darkBorder,
    color: darkTextColor,
    '& .MuiTypography-root': {
      color: darkTextColor,
      letterSpacing: '0.5px',
    },
    '&:hover': {
      ...darkBgStyles,
      boxShadow: darkHoverShadow,
    }
  })
});

// Basic components with common styling
const StyledPaper = styled(Paper)(({ theme, darkMode }) => ({
  padding: '8px 16px',
  margin: 0,
  width: '100%',
  borderRadius: '16px',
  ...getCommonStyles(darkMode)
}));

const StyledBox = styled(Box)(({ theme, darkMode }) => ({
  padding: '8px 16px',
  margin: 0,
  borderRadius: '16px',
  ...getCommonStyles(darkMode)
}));

// Button styling
const StyledAppButton = styled(Button)(({ theme, darkMode }) => ({
  textTransform: 'none',
  borderRadius: '12px',
  margin: darkMode ? '4px 0' : 0,
  
  // Light Mode
  ...(!darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(223, 227, 238, 0.45))',
    boxShadow: lightShadow,
    color: lightTextColor,
    '&:hover': {
      backgroundColor: 'transparent !important',
      background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.45), rgba(255, 255, 255, 0.95))',
      boxShadow: lightHoverShadow,
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    },
    '&:active': {
      boxShadow: 'inset 3px 3px 6px rgba(223, 227, 238, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5)',
    },
    '&.outlined': {
      border: `1px solid ${alpha(baseColor, 0.5)}`,
      '&:hover': {
        border: `2px solid ${accentColor}`,
      }
    },
  }),
  
  // Dark Mode
  ...(darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03))',
    boxShadow: darkShadow,
    color: darkTextColor,
    border: darkBorder,
    '&:hover': {
      backgroundColor: 'transparent !important',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09))',
      boxShadow: darkHoverShadow,
      color: accentColor,
      border: `2px solid ${accentColor}`,
      '& .MuiSvgIcon-root': {
        color: accentColor
      },
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    },
    '&.outlined': {
      border: darkBorder,
      '&:hover': {
        border: `2px solid ${accentColor}`,
      }
    },
  }),
  '&.textPrimary': {
    color: baseColor,
    '&:hover': {
      color: accentColor,
    },
  },
}));

// TextField styling
const StyledTextField = styled(TextField)(({ theme, darkMode }) => ({
  margin: '8px 0',
  
  // Light Mode
  ...(!darkMode && {
    '& .MuiOutlinedInput-root': {
      backgroundColor: 'rgba(255, 255, 255, 0.6)',
      boxShadow: lightShadow,
      borderRadius: '12px',
      '&:hover': {
        boxShadow: lightHoverShadow,
      },
      '&.Mui-focused': {
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: baseColor,
          borderWidth: '2px'
        }
      },
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'rgba(0, 0, 0, 0.12)'
      }
    },
    '& .MuiInputLabel-root': {
      color: 'rgba(0, 2, 3, 0.7)',
      '&.Mui-focused': {
        color: baseColor
      }
    },
    '& .MuiInputBase-input': {
      color: lightTextColor
    }
  }),
  
  // Dark Mode
  ...(darkMode && {
    '& .MuiOutlinedInput-root': {
      backgroundColor: 'rgba(255, 255, 255, 0.03)',
      boxShadow: darkShadow,
      borderRadius: '12px',
      border: darkBorder,
      '&:hover': {
        boxShadow: darkHoverShadow,
      },
      '&.Mui-focused': {
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: accentColor,
          borderWidth: '2px'
        }
      },
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'rgba(0, 255, 242, 0.25)'
      }
    },
    '& .MuiInputLabel-root': {
      color: 'rgba(255, 255, 255, 0.7)',
      '&.Mui-focused': {
        color: accentColor
      }
    },
    '& .MuiInputBase-input': {
      color: darkTextColor
    }
  })
}));

// Table styling
const StyledTable = styled(Table)(({ theme, darkMode }) => ({
  margin: '8px 0',
  borderRadius: '16px',
  overflow: 'hidden',
  
  // Light Mode
  ...(!darkMode && {
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    boxShadow: lightShadow,
    '& .MuiTableHead-root': {
      backgroundColor: 'rgba(223, 227, 238, 0.5)',
    },
    '& .MuiTableCell-root': {
      color: lightTextColor,
      borderColor: 'rgba(0, 0, 0, 0.08)'
    },
    '& .MuiTableRow-root:hover': {
      backgroundColor: 'rgba(223, 227, 238, 0.3)',
    }
  }),
  
  // Dark Mode
  ...(darkMode && {
    backgroundColor: 'rgba(255, 255, 255, 0.03)',
    boxShadow: darkShadow,
    border: darkBorder,
    '& .MuiTableHead-root': {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
    },
    '& .MuiTableCell-root': {
      color: darkTextColor,
      borderColor: 'rgba(0, 255, 242, 0.15)'
    },
    '& .MuiTableRow-root:hover': {
      backgroundColor: 'rgba(0, 255, 242, 0.05)',
    }
  })
}));

// Dialog styling
const StyledDialog = styled(Dialog)(({ theme, darkMode }) => ({
  '& .MuiDialog-paper': {
    borderRadius: '16px',
    overflow: 'hidden',
    
    // Light Mode
    ...(!darkMode && {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 12px 24px rgba(0, 0, 0, 0.15)',
      '& .MuiDialogTitle-root': {
        ...lightBgStyles,
        boxShadow: lightShadow,
        color: lightTextColor,
      }
    }),
    
    // Dark Mode
    ...(darkMode && {
      backgroundColor: 'rgba(15, 15, 15, 0.95)',
      boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 12px 24px rgba(0, 0, 0, 0.4)',
      border: darkBorder,
      '& .MuiDialogTitle-root': {
        ...darkBgStyles,
        boxShadow: darkShadow,
        border: darkBorder,
        color: darkTextColor,
      }
    })
  }
}));

/**
 * SX objects for different components that can be applied to MUI components
 */

// SX objects
const paperSX = (darkMode) => ({
  padding: '8px 16px',
  margin: 0,
  width: '100%',
  borderRadius: '16px',
  ...getCommonStyles(darkMode)
});

const boxSX = (darkMode) => ({
  padding: '8px 16px',
  margin: 0,
  borderRadius: '16px',
  ...getCommonStyles(darkMode)
});

const textFieldSX = (darkMode) => ({
  margin: '8px 0',
  
  // Light Mode
  ...(!darkMode && {
    '& .MuiOutlinedInput-root': {
      backgroundColor: 'rgba(255, 255, 255, 0.6)',
      boxShadow: lightShadow,
      borderRadius: '12px',
      '&:hover': {
        boxShadow: lightHoverShadow,
      },
      '&.Mui-focused': {
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: baseColor,
          borderWidth: '2px'
        }
      },
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'rgba(0, 0, 0, 0.12)'
      }
    },
    '& .MuiInputLabel-root': {
      color: 'rgba(0, 2, 3, 0.7)',
      '&.Mui-focused': {
        color: baseColor
      }
    },
    '& .MuiInputBase-input': {
      color: lightTextColor
    }
  }),
  
  // Dark Mode
  ...(darkMode && {
    '& .MuiOutlinedInput-root': {
      backgroundColor: 'rgba(255, 255, 255, 0.03)',
      boxShadow: darkShadow,
      borderRadius: '12px',
      border: darkBorder,
      '&:hover': {
        boxShadow: darkHoverShadow,
      },
      '&.Mui-focused': {
        '& .MuiOutlinedInput-notchedOutline': {
          borderColor: accentColor,
          borderWidth: '2px'
        }
      },
      '& .MuiOutlinedInput-notchedOutline': {
        borderColor: 'rgba(0, 255, 242, 0.25)'
      }
    },
    '& .MuiInputLabel-root': {
      color: 'rgba(255, 255, 255, 0.7)',
      '&.Mui-focused': {
        color: accentColor
      }
    },
    '& .MuiInputBase-input': {
      color: darkTextColor
    }
  })
});

const tableSX = (darkMode) => ({
  margin: '8px 0',
  borderRadius: '16px',
  overflow: 'hidden',
  
  // Light Mode
  ...(!darkMode && {
    backgroundColor: 'rgba(255, 255, 255, 0.7)',
    boxShadow: lightShadow,
    '& .MuiTableHead-root': {
      backgroundColor: 'rgba(223, 227, 238, 0.5)',
    },
    '& .MuiTableCell-root': {
      color: lightTextColor,
      borderColor: 'rgba(0, 0, 0, 0.08)'
    },
    '& .MuiTableRow-root:hover': {
      backgroundColor: 'rgba(223, 227, 238, 0.3)',
    }
  }),
  
  // Dark Mode
  ...(darkMode && {
    backgroundColor: 'rgba(255, 255, 255, 0.03)',
    boxShadow: darkShadow,
    border: darkBorder,
    '& .MuiTableHead-root': {
      backgroundColor: 'rgba(0, 0, 0, 0.2)',
    },
    '& .MuiTableCell-root': {
      color: darkTextColor,
      borderColor: 'rgba(0, 255, 242, 0.15)'
    },
    '& .MuiTableRow-root:hover': {
      backgroundColor: 'rgba(0, 255, 242, 0.05)',
    }
  })
});

const buttonSX = (darkMode) => ({
  textTransform: 'none',
  borderRadius: '12px',
  margin: darkMode ? '4px 0' : 0,
  
  // Light Mode
  ...(!darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(223, 227, 238, 0.45))',
    boxShadow: lightShadow,
    color: lightTextColor,
    '&:hover': {
      backgroundColor: 'transparent !important',
      background: 'linear-gradient(135deg, rgba(223, 227, 238, 0.45), rgba(255, 255, 255, 0.95))',
      boxShadow: lightHoverShadow,
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    },
    '&:active': {
      boxShadow: 'inset 3px 3px 6px rgba(223, 227, 238, 0.6), inset -3px -3px 6px rgba(255, 255, 255, 0.5)',
    },
    '&.outlined': {
      border: `1px solid ${alpha(baseColor, 0.5)}`,
      '&:hover': {
        border: `2px solid ${accentColor}`,
      }
    },
  }),
  
  // Dark Mode
  ...(darkMode && {
    backgroundColor: 'transparent !important',
    background: 'linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03))',
    boxShadow: darkShadow,
    color: darkTextColor,
    border: darkBorder,
    '&:hover': {
      backgroundColor: 'transparent !important',
      background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.09))',
      boxShadow: darkHoverShadow,
      color: accentColor,
      border: `2px solid ${accentColor}`,
      '& .MuiSvgIcon-root': {
        color: accentColor
      },
      '& .MuiButton-label': {
        color: accentColor,
        textShadow: `0 0 8px ${alpha(accentColor, 0.4)}`,
      },
    },
    '&.outlined': {
      border: darkBorder,
      '&:hover': {
        border: `2px solid ${accentColor}`,
      }
    },
  }),
  '&.textPrimary': {
    color: baseColor,
    '&:hover': {
      color: accentColor,
    },
  },
});

const dialogSX = (darkMode) => ({
  '& .MuiDialog-paper': {
    borderRadius: '16px',
    overflow: 'hidden',
    
    // Light Mode
    ...(!darkMode && {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      boxShadow: 'inset 2px 2px 6px rgba(223, 227, 238, 0.8), inset -2px -2px 6px rgba(255, 255, 255, 0.9), 0 12px 24px rgba(0, 0, 0, 0.15)',
      '& .MuiDialogTitle-root': {
        ...lightBgStyles,
        boxShadow: lightShadow,
        color: lightTextColor,
      }
    }),
    
    // Dark Mode
    ...(darkMode && {
      backgroundColor: 'rgba(15, 15, 15, 0.95)',
      boxShadow: 'inset 2px 2px 4px rgba(0, 0, 0, 0.3), inset -2px -2px 4px rgba(255, 255, 255, 0.07), 0 12px 24px rgba(0, 0, 0, 0.4)',
      border: darkBorder,
      '& .MuiDialogTitle-root': {
        ...darkBgStyles,
        boxShadow: darkShadow,
        border: darkBorder,
        color: darkTextColor,
      }
    })
  }
});

// Export styled components
export {
  StyledPaper,
  StyledBox,
  StyledAppButton,
  StyledTextField,
  StyledTable,
  StyledDialog,
  // Export SX objects
  paperSX,
  boxSX,
  textFieldSX,
  tableSX,
  buttonSX,
  dialogSX,
  // Export constants for custom use
  baseColor,
  accentColor,
  lightBgStyles,
  darkBgStyles,
  lightShadow,
  lightHoverShadow,
  darkShadow,
  darkHoverShadow,
  lightTextColor,
  darkTextColor,
  darkBorder
};

